<template>
  <div class="layout-page pb-32px">
    <div class="page-top h-132px">
      <h1 class="w-1328px mx-auto text-white lh-132px font-size-36px">
        消息中心
      </h1>
    </div>
    <div class="layout-page-inner w-1328px">
      <el-breadcrumb :separator-icon="ArrowRight" class="my-16px">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>消息中心</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="flex overflow-hidden">
        <div class="w-210px mr-32px flex flex-col text-default">
          <div
            v-for="item in typeList"
            :key="item.name"
            class="relative left-tabs-pane h-48px cursor-pointer flex items-center justify-center border-b-1px border-b-solid border-b-#e5e8ed"
            :class="{ 'is-active': item.name === activeType }"
            @click="leftTabClick(item.name)"
          >
            <h6 class="font-size-16px fw-500 mr-14px">{{ item.label }}</h6>
            <span
              v-show="item.num"
              class="w-20px font-size-12px h-20px lh-20px b-rd-10px bg-#ebebeb text-center"
              >{{ item.num }}</span
            >
          </div>
        </div>
        <div class="flex-1" v-loading="loading">
          <div class="bg-white mb-16px" v-show="list.length">
            <NoticeCard
              v-for="item in list"
              :key="item.id"
              :data="item"
              class="cursor-pointer"
            />
          </div>
          <el-pagination
            v-show="list.length"
            class="justify-end"
            :total="total"
            layout="total, sizes, prev, pager, next"
            v-model:current-page="page.pageNum"
            v-model:page-size="page.pageSize"
            :page-sizes="[10, 20, 50, 100]"
          ></el-pagination>
          <Empty v-if="!list.length" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import NoticeCard from "./components/noticeCard.vue";
import { useLoading, usePage } from "@/hooks";
import { useUserStore } from "@/store";

const route = useRoute();
const { loading, setLoading } = useLoading();
const { page, total, resetPage } = usePage();
const $api = inject("$api");
const userStore = useUserStore();

const typeList = computed(() => {
  return [
    {
      label: "通知",
      num: userStore.unreadNum?.notice,
      name: "1",
    },
    {
      label: "公告",
      num: userStore.unreadNum?.inform,
      name: "2",
    },
  ];
});
const activeType = ref(route.query.type || 1);
const leftTabClick = (name) => {
  if (name === activeType.value) return;
  activeType.value = name;
  resetPage();
};

const list = ref([]);
const queryList = async () => {
  setLoading(true);
  try {
    const { data: rows, total: resTotal } = await $api.news.getNoticeList({
      ...page.value,
      noticeType: activeType.value,
    });
    list.value = rows;
    total.value = resTotal;
  } finally {
    setLoading(false);
  }
};

watch(
  () => page.value,
  (val) => {
    queryList();
  },
  {
    deep: true,
  }
);
onMounted(() => {
  queryList();
});
</script>

<style lang="less" scoped>
.page-top {
  position: relative;
  background: linear-gradient(90deg, #004ce4 42%, #0256ff 81%);
  &::after {
    content: "";
    position: absolute;
    right: 236px;
    bottom: 0;
    width: 300px;
    height: 120px;
    background: url("/notice-bg.png") no-repeat center;
    background-size: cover;
  }
}
.left-tabs-pane.is-active {
  background: #fff;
  &::before {
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    height: 100%;
    width: 3px;
    background: @main-color;
  }
}
</style>
